<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/img/log.svg" alt="" />
      </div>
      <!-- 登录表单区域 -->
      <el-form label-width="0px" class="login_form" ref="adminLoginForm"  :model="loginForm" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="grid-content bg-purple" style="display: table-cell; vertical-align: middle; height: 40px">
              <span>账号:</span>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content bg-purple">
              <el-form-item prop="user_name">
                <el-input v-model="loginForm.user_name" :prefix-icon="UserFilled"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <div class="grid-content bg-purple" style="display: table-cell; vertical-align: middle; height: 40px">
              <span>密码:</span>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content bg-purple">
              <el-form-item prop="password">
                <el-input v-model="loginForm.password" :prefix-icon="Lock" type="password"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row justify="end">
          <el-form-item class="login_btn">
            <el-button type="primary" @click="login">登录</el-button>
            <el-button type="info" @click="resetLoginForm">重置</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import {reactive, ref, toRefs} from "vue";
import {
  UserFilled,
  Lock
} from '@element-plus/icons-vue'
import axios from "axios";
import router from "../router/router";
import {ElMessage} from "element-plus";

//重置登录表单
function useRestLog(adminLoginForm){
  const resetLoginForm = () => {
    adminLoginForm.value.resetFields()
  }
  return {
    resetLoginForm,
  }
}
//登录
function useLogin(adminLoginForm, state){
  const login = () => {
    adminLoginForm.value.validate(async (valid) => {
      if(!valid) return;
      const params = {
        user_name: state.loginForm.user_name,
        password: state.loginForm.password
      }
      const res = await axios.post("/api/login_pwd", params)
      if (res.data.code===20000){
        ElMessage({
          showClose: true,
          message: '登录成功',
          type: 'success',
        })
        // window.sessionStorage.setItem("token", res.data.data.token)
        localStorage.setItem("token", res.data.data.token);
        localStorage.setItem("adminUser", state.loginForm.user_name);
        localStorage.setItem("adminID", res.data.data.user.ID);
        router.push("/").then(r => {
          console.log("登录成功")
        })
      }else {
        ElMessage({
          showClose: true,
          message: '登录失败',
          type: 'error',
        })
      }
    })
  }
  return {
    login
  }
}
export default {
  setup() {
    const adminLoginForm = ref();
    const state = reactive({
      loginForm:{
        user_name:"",
        password:""
      }
    })
    const rules = ref({
      user_name: [
        {
          message: "user_name cloud not be empty...",
          required: true,
          trigger: 'blur' //离开的时候去校验
        }
      ],
      password: [
        {
          required: true,
          message: "Password cloud not be empty...",
          trigger: 'blur'
        },
        {
          min: 3,
          max: 30,
          message: "Password's length has to be 6 to 30 characters...",
          trigger: 'blur' //离开的时候去校验
        }
      ]
    })
    return {
      ...toRefs(state),
      rules,
      UserFilled,
      Lock,
      adminLoginForm,
      ...useRestLog(adminLoginForm),
      ...useLogin(adminLoginForm, state)
    }
  }
}
</script>

<style scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100vh;
}
.login_box {
  /*// 宽450像素*/
  width: 450px;
  /*// 高300像素*/
  height: 300px;
  /*// 背景颜色*/
  background-color: #fff;
  /*// 圆角边框3像素*/
  border-radius: 3px;
  /*// 绝对定位*/
  position: absolute;
  /*// 距离左则50%*/
  left: 50%;
  /*// 上面距离50%*/
  top: 50%;
  /*// 进行位移，并且在横轴上位移-50%，纵轴也位移-50%*/
  transform: translate(-50%, -50%);
}
.login_box .avatar_box{
  /*// 盒子高度130像素*/
  height: 130px;
  /*// 宽度130像素*/
  width: 130px;
  /*// 边框线1像素 实线*/
  border: 1px solid #eee;
  /*// 圆角*/
  border-radius: 50%;
  /*// 内padding*/
  padding: 10px;
  /*// 添加阴影 向外扩散10像素 颜色ddd*/
  box-shadow: 0 0 10px #ddd;
  /*// 绝对定位*/
  position: absolute;
  /*// 距离左则*/
  left: 50%;
  /*// 位移*/
  transform: translate(-50%, -50%);
  /*// 背景*/
  background-color: #fff;
}
.login_box .avatar_box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eee;
}

.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.login_btn {
  /*// 设置弹性布局*/
  display: flex;
  /*// 横轴上尾部对齐*/
  justify-content: flex-end;
}
</style>